<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @tap="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">随机图片</view>
			<view class="action-btn" @tap="showMenu">
				<text class="action-icon">⋮</text>
			</view>
		</view>
		
		<!-- 控制面板 -->
		<view class="control-panel">
			<!-- 分类选择 -->
			<view class="category-section">
				<text class="section-title">图片分类</text>
				<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
					<view class="category-list">
						<view 
							v-for="(category, index) in categories" 
							:key="index"
							class="category-item"
							:class="{ active: currentCategory === category.value }"
							@tap="selectCategory(category.value)"
						>
							<text class="category-icon">{{ category.icon }}</text>
							<text class="category-name">{{ category.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 尺寸选择 -->
			<view class="size-section">
				<text class="section-title">尺寸选择</text>
				<view class="size-options">
					<view 
						v-for="(size, index) in sizes" 
						:key="index"
						class="size-item"
						:class="{ active: currentSize === size.value }"
						@tap="selectSize(size.value)"
					>
						<text>{{ size.name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-section">
				<button class="action-button generate-btn" @tap="generateImage">生成随机图片</button>
				<button class="action-button history-btn" @tap="showHistory">浏览历史</button>
			</view>
		</view>
		
		<!-- 图片展示区 -->
		<view class="image-display">
			<view v-if="isLoading" class="loading-container">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载图片中...</text>
			</view>
			
			<view v-else-if="currentImage" class="image-container">
				<image
					:src="currentImage.url"
					mode="aspectFit"
					class="random-image"
					:style="{ height: imageHeight + 'px' }"
					@load="onImageLoad"
					@error="onImageError"
				></image>
				
				<view class="image-info">
					<text class="image-category">{{ currentImage.category }}</text>
					<text class="image-size">{{ currentImage.width }} x {{ currentImage.height }}</text>
				</view>
				
				<view class="image-actions">
					<button class="image-action-btn" @tap="saveImage">
						<text class="action-icon">💾</text>
						<text>保存</text>
					</button>
					
					<button class="image-action-btn" @tap="shareImage">
						<text class="action-icon">↗️</text>
						<text>分享</text>
					</button>
					
					<button class="image-action-btn" @tap="favoriteImage">
						<text class="action-icon">{{ isFavorite ? '❤️' : '🤍' }}</text>
						<text>{{ isFavorite ? '已收藏' : '收藏' }}</text>
					</button>
				</view>
			</view>
			
			<view v-else class="empty-container">
				<image src="/static/images/random/empty.png" mode="aspectFit" class="empty-image"></image>
				<text class="empty-text">点击上方按钮生成随机图片</text>
			</view>
		</view>
		
		<!-- 历史记录弹窗 -->
		<view class="modal" v-if="showHistoryModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">历史记录</text>
					<text class="modal-close" @tap="closeHistoryModal">×</text>
				</view>
				
				<view class="history-list" v-if="imageHistory.length > 0">
					<view 
						v-for="(image, index) in imageHistory" 
						:key="index"
						class="history-item"
						@tap="selectHistoryImage(image)"
					>
						<image :src="image.url" mode="aspectFill" class="history-image"></image>
						<view class="history-info">
							<text class="history-category">{{ image.category }}</text>
							<text class="history-time">{{ formatTime(image.time) }}</text>
						</view>
					</view>
				</view>
				
				<view class="empty-history" v-else>
					<text>暂无历史记录</text>
				</view>
				
				<button class="clear-btn" @tap="clearHistory" v-if="imageHistory.length > 0">清空历史记录</button>
			</view>
		</view>
		
		<!-- 菜单弹窗 -->
		<view class="modal" v-if="showMenuModal">
			<view class="modal-content menu-modal">
				<view class="modal-header">
					<text class="modal-title">菜单</text>
					<text class="modal-close" @tap="closeMenuModal">×</text>
				</view>
				
				<view class="menu-list">
					<view class="menu-item" @tap="goToFavorites">
						<text class="menu-icon">❤️</text>
						<text class="menu-text">我的收藏</text>
					</view>
					
					<view class="menu-item" @tap="showSettings">
						<text class="menu-icon">⚙️</text>
						<text class="menu-text">设置</text>
					</view>
					
					<view class="menu-item" @tap="showAbout">
						<text class="menu-icon">ℹ️</text>
						<text class="menu-text">关于</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			isLoading: false,
			currentImage: null,
			imageHeight: 400,
			isFavorite: false,
			showHistoryModal: false,
			showMenuModal: false,
			currentCategory: 'all',
			currentSize: 'medium',
			imageHistory: [],
			categories: [
				{ name: '全部', value: 'all', icon: '🌟' },
				{ name: '自然', value: 'nature', icon: '🌳' },
				{ name: '城市', value: 'city', icon: '🏙️' },
				{ name: '动物', value: 'animals', icon: '🐾' },
				{ name: '食物', value: 'food', icon: '🍕' },
				{ name: '旅行', value: 'travel', icon: '✈️' },
				{ name: '科技', value: 'technology', icon: '💻' },
				{ name: '抽象', value: 'abstract', icon: '🎨' }
			],
			sizes: [
				{ name: '小', value: 'small' },
				{ name: '中', value: 'medium' },
				{ name: '大', value: 'large' }
			],
			// 模拟API响应的随机图片数据
			sampleImages: [
				{
					url: 'https://picsum.photos/800/600?random=1',
					category: '自然',
					width: 800,
					height: 600
				},
				{
					url: 'https://picsum.photos/1200/800?random=2',
					category: '城市',
					width: 1200,
					height: 800
				},
				{
					url: 'https://picsum.photos/1000/750?random=3',
					category: '动物',
					width: 1000,
					height: 750
				},
				{
					url: 'https://picsum.photos/600/800?random=4',
					category: '食物',
					width: 600,
					height: 800
				},
				{
					url: 'https://picsum.photos/1920/1080?random=5',
					category: '旅行',
					width: 1920,
					height: 1080
				},
				{
					url: 'https://picsum.photos/1600/900?random=6',
					category: '科技',
					width: 1600,
					height: 900
				},
				{
					url: 'https://picsum.photos/1200/1200?random=7',
					category: '抽象',
					width: 1200,
					height: 1200
				},
				{
					url: 'https://picsum.photos/1080/720?random=8',
					category: '自然',
					width: 1080,
					height: 720
				},
				{
					url: 'https://picsum.photos/1500/1000?random=9',
					category: '城市',
					width: 1500,
					height: 1000
				},
				{
					url: 'https://picsum.photos/900/600?random=10',
					category: '动物',
					width: 900,
					height: 600
				}
			]
		};
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		
		// 加载历史记录
		this.loadHistory();
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 显示菜单
		showMenu() {
			this.showMenuModal = true;
		},
		
		// 关闭菜单弹窗
		closeMenuModal() {
			this.showMenuModal = false;
		},
		
		// 选择分类
		selectCategory(category) {
			this.currentCategory = category;
		},
		
		// 选择尺寸
		selectSize(size) {
			this.currentSize = size;
		},
		
		// 生成随机图片
		generateImage() {
			this.isLoading = true;
			
			// 模拟网络请求延迟
			setTimeout(() => {
				// 从样本图片中随机选择一张
				let filteredImages = this.sampleImages;
				
				// 如果选择了特定分类，进行筛选
				if (this.currentCategory !== 'all') {
					const categoryName = this.categories.find(c => c.value === this.currentCategory).name;
					filteredImages = this.sampleImages.filter(img => img.category === categoryName);
				}
				
				// 如果没有找到匹配的图片，使用所有图片
				if (filteredImages.length === 0) {
					filteredImages = this.sampleImages;
				}
				
				// 随机选择一张图片
				const randomIndex = Math.floor(Math.random() * filteredImages.length);
				const selectedImage = { ...filteredImages[randomIndex] };
				
				// 根据所选尺寸调整图片大小（实际应用中可能是从API获取不同尺寸的图片）
				switch (this.currentSize) {
					case 'small':
						selectedImage.width = Math.floor(selectedImage.width * 0.5);
						selectedImage.height = Math.floor(selectedImage.height * 0.5);
						break;
					case 'large':
						selectedImage.width = Math.floor(selectedImage.width * 1.5);
						selectedImage.height = Math.floor(selectedImage.height * 1.5);
						break;
				}
				
				// 添加时间戳
				selectedImage.time = new Date();
				
				// 设置当前图片
				this.currentImage = selectedImage;
				
				// 添加到历史记录
				this.imageHistory.unshift(selectedImage);
				
				// 限制历史记录数量
				if (this.imageHistory.length > 20) {
					this.imageHistory = this.imageHistory.slice(0, 20);
				}
				
				// 保存历史记录
				this.saveHistory();
				
				// 重置收藏状态
				this.isFavorite = false;
				
				this.isLoading = false;
			}, 1000);
		},
		
		// 图片加载完成
		onImageLoad(e) {
			// 获取图片的实际宽高比并调整显示高度
			const { width, height } = e.detail;
			const aspectRatio = height / width;
			
			// 根据视窗宽度计算合适的高度
			const windowWidth = uni.getSystemInfoSync().windowWidth;
			this.imageHeight = windowWidth * aspectRatio;
		},
		
		// 图片加载失败
		onImageError() {
			uni.showToast({
				title: '图片加载失败',
				icon: 'none'
			});
			this.isLoading = false;
		},
		
		// 保存图片
		saveImage() {
			if (!this.currentImage) return;
			
			uni.showLoading({
				title: '保存中...'
			});
			
			// 在实际应用中，这里应该使用uni.saveImageToPhotosAlbum
			// 这里模拟保存成功
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
			}, 1000);
		},
		
		// 分享图片
		shareImage() {
			if (!this.currentImage) return;
			
			uni.showActionSheet({
				itemList: ['分享给朋友', '分享到朋友圈', '复制链接'],
				success: (res) => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					});
				}
			});
		},
		
		// 收藏图片
		favoriteImage() {
			if (!this.currentImage) return;
			
			this.isFavorite = !this.isFavorite;
			
			uni.showToast({
				title: this.isFavorite ? '已收藏' : '已取消收藏',
				icon: 'success'
			});
		},
		
		// 显示历史记录
		showHistory() {
			this.showHistoryModal = true;
		},
		
		// 关闭历史记录弹窗
		closeHistoryModal() {
			this.showHistoryModal = false;
		},
		
		// 选择历史图片
		selectHistoryImage(image) {
			this.currentImage = image;
			this.closeHistoryModal();
		},
		
		// 清空历史记录
		clearHistory() {
			uni.showModal({
				title: '清空历史记录',
				content: '确定要清空所有历史记录吗？',
				success: (res) => {
					if (res.confirm) {
						this.imageHistory = [];
						this.saveHistory();
						this.closeHistoryModal();
					}
				}
			});
		},
		
		// 加载历史记录
		loadHistory() {
			// 在实际应用中，这里应该从本地存储加载历史记录
			// 这里使用模拟数据
		},
		
		// 保存历史记录
		saveHistory() {
			// 在实际应用中，这里应该将历史记录保存到本地存储
			// 这里只是模拟操作
		},
		
		// 格式化时间
		formatTime(date) {
			if (!date) return '';
			
			const now = new Date();
			const diffMs = now - date;
			const diffSec = Math.floor(diffMs / 1000);
			const diffMin = Math.floor(diffSec / 60);
			const diffHour = Math.floor(diffMin / 60);
			const diffDay = Math.floor(diffHour / 24);
			
			if (diffDay > 0) {
				return `${diffDay}天前`;
			} else if (diffHour > 0) {
				return `${diffHour}小时前`;
			} else if (diffMin > 0) {
				return `${diffMin}分钟前`;
			} else {
				return '刚刚';
			}
		},
		
		// 前往收藏页面
		goToFavorites() {
			this.closeMenuModal();
			uni.showToast({
				title: '收藏功能开发中',
				icon: 'none'
			});
		},
		
		// 显示设置
		showSettings() {
			this.closeMenuModal();
			uni.showToast({
				title: '设置功能开发中',
				icon: 'none'
			});
		},
		
		// 显示关于信息
		showAbout() {
			this.closeMenuModal();
			uni.showModal({
				title: '关于随机图片',
				content: '版本：1.0.0\n\n随机图片功能可以帮助您获取不同类别的随机图片，用于测试、设计或娱乐目的。\n\n图片来源：Unsplash等开源图库。',
				showCancel: false
			});
		}
	}
};
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	position: relative;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #1a73e8;
	height: 88rpx;
	padding: 0 30rpx;
}

.back-btn, .action-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-icon, .action-icon {
	font-size: 40rpx;
	color: #ffffff;
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 34rpx;
	font-weight: 600;
	color: #ffffff;
}

/* 控制面板 */
.control-panel {
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: 30rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

/* 分类选择 */
.category-section {
	margin-bottom: 30rpx;
}

.category-scroll {
	white-space: nowrap;
}

.category-list {
	display: inline-flex;
	padding: 10rpx 0;
}

.category-item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-right: 30rpx;
	padding: 20rpx;
	border-radius: 16rpx;
	background-color: #f9f9f9;
	width: 120rpx;
}

.category-item.active {
	background-color: #e8f0fe;
}

.category-icon {
	font-size: 40rpx;
	margin-bottom: 10rpx;
}

.category-name {
	font-size: 24rpx;
	color: #666;
}

.category-item.active .category-name {
	color: #1a73e8;
	font-weight: 500;
}

/* 尺寸选择 */
.size-section {
	margin-bottom: 30rpx;
}

.size-options {
	display: flex;
	border: 1rpx solid #e0e0e0;
	border-radius: 10rpx;
	overflow: hidden;
}

.size-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #666;
	background-color: #f9f9f9;
}

.size-item.active {
	background-color: #1a73e8;
	color: #ffffff;
}

/* 操作按钮 */
.action-section {
	display: flex;
	justify-content: space-between;
}

.action-button {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	margin: 0;
}

.generate-btn {
	background-color: #1a73e8;
	color: #ffffff;
	margin-right: 20rpx;
}

.history-btn {
	background-color: #f5f5f5;
	color: #666;
}

/* 图片展示区 */
.image-display {
	margin: 0 30rpx 30rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	min-height: 500rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400rpx;
}

.loading-spinner {
	width: 80rpx;
	height: 80rpx;
	border: 6rpx solid #f3f3f3;
	border-top: 6rpx solid #1a73e8;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 30rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #999;
}

.image-container {
	width: 100%;
}

.random-image {
	width: 100%;
	border-radius: 10rpx;
}

.image-info {
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	padding: 10rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	margin-bottom: 20rpx;
}

.image-category {
	font-size: 28rpx;
	color: #1a73e8;
	background-color: #e8f0fe;
	padding: 6rpx 20rpx;
	border-radius: 30rpx;
}

.image-size {
	font-size: 24rpx;
	color: #999;
	line-height: 40rpx;
}

.image-actions {
	display: flex;
	justify-content: space-around;
	margin-top: 30rpx;
}

.image-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: transparent;
	line-height: normal;
	padding: 0;
	margin: 0;
}

.image-action-btn::after {
	border: none;
}

.image-action-btn text {
	font-size: 24rpx;
	color: #666;
	margin-top: 10rpx;
}

.image-action-btn .action-icon {
	font-size: 48rpx;
	color: #333;
}

.empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400rpx;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
	opacity: 0.5;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* 历史记录弹窗 */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

.modal-content {
	width: 80%;
	max-height: 80vh;
	background-color: #ffffff;
	border-radius: 20rpx;
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background-color: #f8f8f8;
	border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.modal-close {
	font-size: 36rpx;
	color: #999;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.history-list {
	padding: 30rpx;
	max-height: 60vh;
	overflow-y: auto;
}

.history-item {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	padding-bottom: 30rpx;
}

.history-item:last-child {
	margin-bottom: 0;
	border-bottom: none;
}

.history-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.history-info {
	flex: 1;
}

.history-category {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 15rpx;
	display: block;
}

.history-time {
	font-size: 24rpx;
	color: #999;
}

.empty-history {
	padding: 60rpx 0;
	text-align: center;
	color: #999;
	font-size: 28rpx;
}

.clear-btn {
	width: 80%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	background-color: #f44336;
	color: #ffffff;
	font-size: 28rpx;
	margin: 30rpx auto;
}

/* 菜单弹窗 */
.menu-modal {
	width: 60%;
}

.menu-list {
	padding: 30rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
}

.menu-text {
	font-size: 30rpx;
	color: #333;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
</style> 